<header class="article-header-bg article-say-bg">
    	<figure>
                <!-- 输出第一张缩略图 -->
                <img data-src="<?php echo _getThumbnails($this)[0] ?>" alt="<?= $this->title ?> 封面图" class="cover-image">
                <!-- 占位图 -->
                <div class="dynamic-background"></div>
    		    <i class="loading">封面图加载中</i>
    	</figure>
    	<hgroup class="article-header-content">
    		<h1 class="article-title">
    			<?php $this->title() ?>
    		</h1>
    		<div class="meta-bar">
    			<span class="meta-item">
    				<svg class="meta-icon" viewBox="0 0 24 24">
    					<path d="M12 4a4 4 0 0 1 4 4 4 4 0 0 1-4 4 4 4 0 0 1-4-4 4 4 0 0 1 4-4m0 10c4.42 0 8 1.79 8 4v2H4v-2c0-2.21 3.58-4 8-4z" />
    				</svg>
    				<?php $this->author(); ?>
    			</span>
    			<span class="meta-item">
    				<svg class="meta-icon" viewBox="0 0 24 24">
    					<path d="M19 3h-1V1h-2v2H8V1H6v2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 16H5V8h14v11z" />
    				</svg>
    				<?php $this->date(); ?>
    			</span>
    			<span class="meta-item">
    				<svg class="meta-icon" viewBox="0 0 24 24">
    					<path d="M16 13c.55 0 1-.45 1-1s-.45-1-1-1-1 .45-1 1 .45 1 1 1zm-6 0c.55 0 1-.45 1-1s-.45-1-1-1-1 .45-1 1 .45 1 1 1zm6-6c.55 0 1-.45 1-1s-.45-1-1-1-1 .45-1 1 .45 1 1 1zm-6 0c.55 0 1-.45 1-1s-.45-1-1-1-1 .45-1 1 .45 1 1 1zm2-7C6.48 0 2 4.48 2 10s4.48 10 10 10 10-4.48 10-10S17.52 0 12 0z" />
    				</svg>
    				<?php get_post_view($this) ?> 热度
    			</span>
    			<span class="meta-item">
    				<svg class="meta-icon" viewBox="0 0 24 24">
    					<path d="M20 2H4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h14l4 4V4c0-1.1-.9-2-2-2zm-2 12H6v-2h12v2zm0-3H6V9h12v2zm0-3H6V6h12v2z" />
    				</svg>
    				<?php $this->commentsNum('0 评论', '1 评论', '%d 评论'); ?>
    			</span>
    		</div>
    		<div class="waves-box">
    			<svg class="waves" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 24 150 28" preserveAspectRatio="none" shape-rendering="auto">
    				<defs>
    					<path id="gentle-wave" d="M-160 44c30 0 58-18 88-18s 58 18 88 18 58-18 88-18 58 18 88 18 v44h-352z"></path>
    				</defs>
    				<g class="parallax">
    					<use xlink:href="#gentle-wave" x="48" y="0"></use>
    					<use xlink:href="#gentle-wave" x="48" y="3"></use>
    					<use xlink:href="#gentle-wave" x="48" y="5"></use>
    					<use xlink:href="#gentle-wave" x="48" y="7"></use>
    				</g>
    			</svg>
    		</div>
    	</hgroup>
    </header>
    
    <main class="container">
        <section class="article-wrapper">
        	<article class="main-content">
                <div class="text-layout">
                    <?php _article_changetext($this); ?>
                </div>
        	</article>
        </section>
        <section class="comments-wrapper">
            <?php $this->need('comments.php');?>
        </section>
    </main>